<template>
  <el-table  :row-key="getRowKeys" :show-header="isShowHeader"  @selection-change="handleSelectionChange"  border v-loading="loading" :data="data" stripe style="width: 100%; height: 80%">
    <el-table-column :reserve-selection="true"  v-if="isSelection" type="selection" />
    <el-table-column v-for="(col,index) in columns" :key="index" :align="col.align" :min-width="col.width" :prop="col.prop" :label="col.label" :width="col.width">
<!--      自定义通用插槽-->
      <template #default="scope" v-if="col.isSlot">
        <slot :name="col.prop" v-bind="scope"></slot>
      </template>
    </el-table-column>
    <template #empty>
      <el-empty description="暂无数据" />
    </template>
  </el-table>
 <div class="pagination" v-if="isShowPagination">
   <el-pagination
       v-model:currentPage="currentPage"
       v-model:page-size="pageSize"
       :page-sizes="[10, 20, 30, 40]"
       :disabled="false"
       layout="total, sizes, prev, pager, next, jumper"
       :total="total"
       @size-change="sizeChange"
       @current-change="currentChange"
       @prev-click="prevClick"
       @next-click="nextClick"
   />
 </div>
</template>

<script setup name="GTable">
import { defineProps, ref, computed } from 'vue';

const emit = defineEmits(['sizeChange', 'currentChange', 'prevClick', 'nextClick', 'handleSelectionChange']);
const props = defineProps({
  data: {
    type: Array,
    default: [],
  },
  columns: {
    type: Array,
    default: [],
  },
  stripe: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  total: {
    type: Number,
    default: 0,
  },
  isSelection: {
    type: Boolean,
    default: false,
  },
  isShowHeader: {
    type: Boolean,
    default: true
  },
  isShowPagination: {
    type: Boolean,
    default: true
  }
});
const currentPage = ref(1);
const pageSize = ref(10);
// 切换每页大小
function sizeChange(size) {
  emit('sizeChange', size);
}
// 跳转至指定页
function currentChange(page) {
  emit('currentChange', page);
}
// 切换到上一页
function prevClick(prevPage) {
  emit('prevClick', prevPage);
}
// 切换到下一页
function nextClick(nextPage) {
  emit('nextClick', nextPage);
}
// 多选操作
function handleSelectionChange(selectRows) {
  console.log(selectRows)
  emit('handleSelectionChange', selectRows);
}
function getRowKeys (row) {
  return row.id
}
</script>

<style scoped lang="css">
:deep(.el-table) {
  color: unset;
  overflow: auto;
}
:deep(thead) {
  color: var(--el-text-color-primary) !important;
}
.pagination {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center;
  height: 7%;
}
</style>
